<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>{{ $t("新增礼物卡") }}</h3>
      <el-form
        ref="addcart"
        :rules="rules"
        :model="addcart"
        label-width="150px"
      >
        <el-form-item :label="$t('礼物卡分类')" prop="classificationId">
          <el-select
            v-model="addcart.classificationId"
            clearable
            placeholder="请选择礼物卡分类"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.classificationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('礼物卡名称')" prop="name">
          <el-input
            style="min-width: 200px; max-width: 1000px"
            v-model="addcart.name"
          />
        </el-form-item>
        <el-form-item :label="$t('图片')" prop="picUrl">
          <el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="addcart.picUrl" :src="addcart.picUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <label
              v-if="addcart.picUrl"
              class="el-upload-list__item-status-label avatar-uploader__status_label"
              @click.stop="handleRemove()"
              ><i class="el-icon-delete"></i
            ></label>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('类型')" prop="type">
          {{ addcart.type == 2 ? $t("实体卡") : $t("虚拟卡") }}
        </el-form-item>
        <el-form-item :label="$t('数量')" prop="numbers">
          <el-radio-group v-model="addcart.numbers">
            <el-radio :label="0" style="height: 41px; line-height: 35px">{{
              $t("无限量")
            }}</el-radio>
            <div>
              <el-radio :label="1">
                <el-input
                  style="width: 100px; padding: 0px; color: #000"
                  @focus="InputFocus"
                  v-model="input"
                  clearable
                ></el-input
                >{{ $t("张") }}
              </el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('描述')" prop="desc">
          <el-input
            v-model="addcart.desc"
            style="min-width: 200px; max-width: 1000px"
            type="textarea"
            autosize
          />
        </el-form-item>
      </el-form>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">{{ $t("Cancel") }}</el-button>
      <el-button
        icon="el-icon-circle-plus"
        type="success"
        @click="handleCreate"
        >{{ $t("新增礼物卡") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import { uploadPath } from "@/api/storage";
import { getToken } from "@/utils/auth";
import { createGiftCard } from "@/api/gift";
import { cardClassificationList } from "@/api/cardClassification";

export default {
  name: "giftcardCreate",
  computed: {
    headers() {
      return {
        "X-Litemall-Admin-Token": getToken(),
      };
    },
  },
  data() {
    return {
      list: [],
      input: "",
      addcart: {
        name: "",
        type: this.$route.query.type,
        desc: "",
        picUrl: "",
        numbers: 0,
        classificationId: undefined,
      },
      dataForm: {
        type: 1,
        picUrl: "",
      },
      uploadPath,
      rules: {
        name: [
          {
            required: true,
            message: this.$t("礼物卡名称必填"),
            trigger: "blur",
          },
        ],
        picUrl: [
          {
            required: true,
            message: this.$t("礼物卡名称必填"),
            trigger: "blur",
          },
        ],
        numbers: [
          {
            required: true,
            message: this.$t("礼物卡数量必填"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCardClassification();
  },
  methods: {
    uploadPicUrl: function (response) {
      this.addcart.picUrl = response.data.url;
    },
    InputFocus() {
      this.addcart.numbers = 1;
      // console.log('获取焦点')
    },
    handleCreate() {
      this.addcart.numbers = this.addcart.numbers == 0 ? 0 : this.input;
      if (!this.addcart.name) {
        this.$notify.error({
          title: this.$t("Failed"),
          message: this.$t("请填写礼物卡名称"),
        });
        return;
      } else if (this.addcart.numbers != 0 && !this.input) {
        // console.log('请填写数量')
        this.$notify.error({
          title: this.$t("Failed"),
          message: this.$t("请填写数量"),
        });
        return;
      } else if (!this.addcart.picUrl) {
        this.$notify.error({
          title: this.$t("Failed"),
          message: this.$t("请填上传图片"),
        });
        return;
      } else {
        createGiftCard(this.addcart).then((res) => {
          this.$notify.success({
            title: this.$t("Success!"),
            message: this.$t("Success!"),
          });
          if (this.addcart.type == 2) {
            this.$router.push({ path: "/promotion/giftcard" });
          } else {
            this.$router.push({ path: "/promotion/VirtualCardManagement" });
          }
        });
      }
    },
    handleCancel() {
      if (this.addcart.type == 2) {
        this.$router.push({ path: "/promotion/giftcard" });
      } else {
        this.$router.push({ path: "/promotion/VirtualCardManagement" });
      }
    },
    handleRemove: function () {
      this.dataForm.picUrl = undefined;
    },
    getCardClassification() {
      var formInline = {
        classificationName: undefined,
        classificationStatus: undefined,
        page: 1,
        limit: 1000,
        sort: "add_time",
        order: "desc",
      };
      cardClassificationList(formInline)
        .then((response) => {
          this.list = response.data.data.list;
        })
        .catch(() => {
          this.list = [];
        });
    },
  },
};
</script>

<style scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
.avatar-uploader__status_label {
  display: block;
  color: red;
  cursor: pointer;
}
</style>
